<template>
  <ul class="swiperCard">
    <swiper
        :slidesPerView="1"
        :spaceBetween="100"
        :centeredSlides="true"
        :pagination="{enabled:true,type:'bullets',el:'.swiper-pagination',dynamicBullets: true,dynamicMainBullets: 1,clickable :true,}"
        :modules="modules">
      <swiper-slide v-for="(item,index) in props.content">
        <li class="detailCard">
          <div class="card">
            <div class="poster">
              <img :src="item.img" alt="">
            </div>
            <div class="details" v-if="props.showDetails">
              <img class="logo" :src="item.detailsImg" alt="">
              <h3 v-text="item.title"></h3>
              <van-space>
                <i class="iconfont icon-01_neirongguanli"></i>
                <span v-text="item.source"></span>
                <i class="iconfont icon-wenjianjia"></i>
                <span v-text="index+1 + '/' + content.length"></span>
              </van-space>
              <div class="tags">
                <span v-for="tag in item.tags" v-text="tag"></span>
              </div>
              <div class="info">
                <p v-text="item.content"></p>
              </div>
            </div>
          </div>
        </li>
      </swiper-slide>
    </swiper>
    <!--分页器。如果放置在swiper外面，需要自定义样式。-->
    <div class="swiper-pagination"></div>
  </ul>
</template>
<script setup name="swiperCard">
import 'swiper/swiper-bundle.css'
import 'swiper/less';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper 所需组件
import { A11y,Pagination } from 'swiper'

import {reactive} from "vue";
import {getAssetURL} from "@/utils/load_assets.js";
// 分页器

const modules = [A11y,Pagination]

const props = defineProps({
  // 内容
  content:{
    type: Array,
    default: [{
      id: '',
      title: 'Spring Boot项目打成 .exe 程序,Spring Boot项目打成 .exe 程序,Spring Boot项目打成 .exe 程序',
      img: getAssetURL('20220803033713408.jpg'),
      detailsImg: getAssetURL('avartar.png'),
      content: '比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！',
      tags: ['标签1','标签2','标签3','标签4','标签5'],
      source: 'mp.weixin.qq.com',
    },{
      id: '',
      title: 'Spring Boot项目打成 .exe 程序',
      img: 'https://pic.3gbizhi.com/uploads/20220914/6b0b9eaf58e45af840a66c88267dc5a6.jpg',
      detailsImg: getAssetURL('avartar.png'),
      content: '比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！',
      tags: ['标签1','标签2','标签3','标签4','标签5'],
      source: 'mp.weixin.qq.com',
    },{
      id: '',
      title: 'Spring Boot项目打成 .exe 程序',
      img: 'https://pic.3gbizhi.com/uploads/20220803/a1136fce69cad5ec218b8e6a5cc1cd77.jpg',
      detailsImg: getAssetURL('avartar.png'),
      content: '比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！',
      tags: ['标签1','标签2','标签3','标签4','标签5'],
      source: 'mp.weixin.qq.com',
    },{
      id: '',
      title: 'Spring Boot项目打成 .exe 程序',
      img: 'https://pic.3gbizhi.com/uploads/20220729/c87525531ec69c81a8fbdde397894d49.jpg',
      detailsImg: getAssetURL('avartar.png'),
      content: '比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！',
      tags: ['标签1','标签2','标签3','标签4','标签5'],
      source: 'mp.weixin.qq.com',
    },{
      id: '',
      title: 'Spring Boot项目打成 .exe 程序',
      img: 'https://pic.3gbizhi.com/uploads/20211222/79b647eda213e13940b861c918c65503.jpg',
      detailsImg: getAssetURL('avartar.png'),
      content: '比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！',
      tags: ['标签1','标签2','标签3','标签4','标签5'],
      source: 'mp.weixin.qq.com',
    },{
      id: '',
      title: 'Spring Boot项目打成 .exe 程序',
      img: 'https://pic.3gbizhi.com/uploads/20211207/978c444f03692dcf66e20b9acab534ee.jpg',
      detailsImg: getAssetURL('avartar.png'),
      content: '比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！',
      tags: ['标签1','标签2','标签3','标签4','标签5'],
      source: 'mp.weixin.qq.com',
    },{
      id: '',
      title: 'Spring Boot项目打成 .exe 程序',
      img: 'https://pic.3gbizhi.com/uploads/20211222/eaabf247e0a8720fe18696099bbe085d.jpg',
      detailsImg: getAssetURL('avartar.png'),
      content: '比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！',
      tags: ['标签1','标签2','标签3','标签4','标签5'],
      source: 'mp.weixin.qq.com',
    }
    ],
  },
  showDetails: {
    type: Boolean,
    default: true
  }
});
</script>
<style lang="less" scoped>
.swiperCard {
  overflow-y: hidden;
  overflow-x: hidden;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  .detailCard{
    box-sizing: border-box;
    font-family: 'PT Sans', sans-serif;
    display: flex;
    justify-content: center;
    min-height: 72vh;
  }
  .card{
    position: relative;
    width: 320px;
    height: 450px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.25);
    -webkit-box-reflect: below 10px linear-gradient(transparent,#0004);
  }
  .card .poster::before{
    content: '';
    position: absolute;
    bottom: -180px;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #1064a6 50%, transparent);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    z-index: 1;
  }
  .card:hover .poster::before{
    bottom: 0px;
  }
  .card .poster{
    position: relative;
    overflow: hidden;
  }
  .card .poster img{
    width: 100%;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
  }
  .card:hover .poster img{
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    filter: blur(5px);
    -webkit-filter: blur(5px);
  }
  .card .details{
    position: absolute;
    bottom: -60px;
    left: 0;
    padding: 20px;
    z-index: 2;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
  }
  .card:hover .details{
    bottom: 30px;
    h3:hover,.van-space i:hover,.van-space span:hover,.info p:hover{
      color: #ff5722;
    }
  }
  .card .details .logo{
    max-width: 180px;
  }
  .card .details h3{
    font-size: 0.7em;
    color: #fff;
    -webkit-line-clamp: 1;   // 4行
    overflow: hidden;			// 超出隐藏 可以设置scroll滑动
    text-overflow: ellipsis;	// 隐藏部分...
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .card .details .van-space{
    position: relative;
    padding: 5px 0;
    width: 100%;
  }
  .card .details .van-space i{
    color: #fff;
  }
  .card .details .van-space span{
    color: #fff;
  }
  .card .details .tags{
    position: relative;
    top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .card .details .tags span{
    padding: 2px 5px;
    color: #fff;
    background: #03a8f5;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;


  }
  .card .details .tags span:nth-child(even){
    background-color: #ff5722;
  }
  .card .details .info{
    position: relative;
    color: #fff;
    top: 20px;
    p{
      text-indent:2em;/*首行缩进2个字符*/
      font-size: 0.6em;
      -webkit-line-clamp: 4;   // 4行
      overflow: hidden;			// 超出隐藏 可以设置scroll滑动
      text-overflow: ellipsis;	// 隐藏部分...
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
  }
  --swiper-pagination-color: #00ff33;/* 两种都可以 */
}
.swiperCard::-webkit-scrollbar {
  display: none;/*隐藏滚动条*/
}
</style>
